<html>
	<head>
		<title>VXGCloudSDK-Web 3.1.9</title>
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
		
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="x-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" id="font-style-css" href="https://fonts.googleapis.com/css?family=Montserrat%3A400%2C700&amp;ver=4.7.6" type="text/css" media="all">
		<link rel="stylesheet" type="text/css" href="css/index.css">

		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		
    <!-- automaticly include: begin -->
    <link rel="stylesheet" type="text/css" href="vxgwebsdk/video-js.min.css">
    <link rel="stylesheet" type="text/css" href="vxgwebsdk/CloudSDK.min.css">
    <script type="text/javascript" src="vxgwebsdk/video.min.js"></script>
    <script type="text/javascript" src="vxgwebsdk/webrtc-adapter-latest.js"></script>
    <script type="text/javascript" src="vxgwebsdk/CloudSDK.min.js"></script>
    <script type="text/javascript">
	       CloudSDK.flashswf = "vxgwebsdk/video-js-by-vxg-buff200.swf";
    </script>
    <!-- automaticly include: end -->

		<script>
			$(document).ready(function () {
				window.player1 = new CloudPlayerSDK('player1');
				window.player2 = new CloudPlayerSDK('player2');
				window.player3 = new CloudPlayerSDK('player3');
				window.player4 = new CloudPlayerSDK('player4');

				function play_channel(player, channelel){
					var channelElem = $('#' + channelel);
					var channel = channelElem.val();
					if (!channel || channel === '') {
						channelElem.css('background-color', 'red').focus();
						setTimeout(function () {channelElem.css('background-color', '');},200);
						return;
					}

					// player.stop();
					player.setSource(channel);
				}

				$('#play_channel1').unbind().bind('click', function(){
					play_channel(player1, 'channel1');
				});
				$('#play_channel2').unbind().bind('click', function(){
					play_channel(player2, 'channel2');
				});
				$('#play_channel3').unbind().bind('click', function(){
					play_channel(player3, 'channel3');
				});
				$('#play_channel4').unbind().bind('click', function(){
					play_channel(player4, 'channel4');
				});
			});
		</script>
	</head>

<body>

	<nav class="navbar navbar-expand-lg navbar-light navbar-black navbar-toggleable-md  fixed-top">
		<div class="container">
		  <a class="navbar-brand" href="#"></a>
		  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navigation-menu" aria-controls="navigation-menu" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		  </button>
		  <div class="navbar-collapse collapse" id="navigation-menu">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item"><a class="nav-link" href="index.html#sdk">VXGCloud SDK (3.1.9)</a></li>
				<li class="nav-item"><a class="nav-link" href="index.html#examples">Examples</a></li>
			</ul>
		  </div>
		</div>
	</nav>

<div class="container main-container">

	<div class="row">
		<div class="col-md-12">
			<h2>Multi players</h2>
			<p>
				<a href="example_cloudplayersdk2.html" id="prev_example" class="btn btn-link ">Previous example</a>
				<a href="example_cloudplayersdk4.html" id="next_example" class="btn btn-link ">Next example</a>
			</p>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="form-group">
				<label for="cameraID">Player1: Access token</label>
				<div class="input-group">
					<input id="channel1" type="text" class="form-control" placeholder="Enter access token" value="">
					<span class="input-group-btn">
						<button id="play_channel1" class="btn btn-default btn-vxg">Play</button>
					</span>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="form-group">
				<label for="cameraID">Player2: Access token</label>
				<div class="input-group">
					<input id="channel2" type="text" class="form-control" placeholder="Enter access token" value="">
					<span class="input-group-btn">
						<button id="play_channel2" class="btn btn-default btn-vxg">Play</button>
					</span>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6" style="height: 360px">
			<div id="player1"></div>
		</div>
		<div class="col-md-6" style="height: 360px">
			<div id="player2"></div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-6">
			<div class="form-group">
				<label for="cameraID">Player3: Access token</label>
				<div class="input-group">
					<input id="channel3" type="text" class="form-control" placeholder="Enter access token" value="">
					<span class="input-group-btn">
						<button id="play_channel3" class="btn btn-default btn-vxg">Play</button>
					</span>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="form-group">
				<label for="cameraID">Player4: Access token</label>
				<div class="input-group">
					<input id="channel4" type="text" class="form-control" placeholder="Enter access token" value="">
					<span class="input-group-btn">
						<button id="play_channel4" class="btn btn-default btn-vxg">Play</button>
					</span>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6" style="height: 360px">
			<div id="player3"></div>
		</div>
		<div class="col-md-6" style="height: 360px">
			<div id="player4"></div>
		</div>
	</div>
</div>
<br><br>
<br><br>
</body>
</html>
